<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WeebBox 0.3</title>
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script type="text/javascript" src="scripts/weebbox.js"></script>
<link rel="stylesheet" type="text/css" href="styles/weebbox.css" />
</head>
<body>

<h2>Standalone WeebBox</h2>
<p>
First off just an image on it's own, to do this just create a link with and immage inside and then add <span class="code">rel=&quot;wbox&quot;</span> to the anchor.
</p>
<p>
<a href="images/w33b_zombie.jpg" rel="wbox" title="braaaaiiiinns!"><img class="thumb" src="images/w33b_zombie_thumb.gif" width="75" height="75" /></a>
</p>
<p>
code:<br />
<span class="codeblock">&lt;a href=&quot;images/w33b_zombie.jpg&quot; rel=&quot;wbox&quot; title=&quot;braaaaiiiinns!&quot;&gt;<br />
&lt;img src=&quot;images/w33b_zombie_thumb.gif&quot; width=&quot;75&quot; height=&quot;75&quot; /&gt;<br />
&lt;/a&gt;</span>
</p>
	
<h2>Gallery WeebBox</h2>
<p>
This time, setup your images and anchors and then for each image that you want to be in the gallery set add <span class="code">rel=&quot;wbox[yourgalleryname]&quot;</span>
</p>
<p>
<a href="images/trippy.jpg" rel="wbox[weeb]" title="much trippyness...is that a word!?"><img class="thumb" src="images/trippy_thumb.jpg" width="75" height="75" /></a>
<a href="images/train_station.jpg" rel="wbox[weeb]" title="my attempt at an arty shot"><img class="thumb" src="images/train_station_thumb.jpg" width="75" height="75" /></a>
<a href="images/hiro.jpg" rel="wbox[weeb]" title="my cat hiro....ahhhhhhhhh"><img class="thumb" src="images/hiro_thumb.jpg" width="75" height="75" /></a>
<a href="images/moon.jpg" rel="wbox[weeb]" title="hahaha, mooned you !"><img class="thumb" src="images/moon_thumb.jpg" width="75" height="75" /></a>
</p>
<p>
Code:<br />
<span class="codeblock">&lt;a href=&quot;images/trippy.jpg&quot; rel=&quot;wbox[weeb]&quot; title=&quot;much trippyness...is that a word!?&quot;&gt;<br />
&lt;img src=&quot;images/trippy_thumb.jpg&quot; width=&quot;75&quot; height=&quot;75&quot; /&gt;<br />
&lt;/a&gt;<br />
&lt;a href=&quot;images/train_station.jpg&quot; rel=&quot;wbox[weeb]&quot; title=&quot;my attempt at an arty shot&quot;&gt;<br />
&lt;img src=&quot;images/train_station_thumb.jpg&quot; width=&quot;75&quot; height=&quot;75&quot; /&gt;<br />
&lt;/a&gt;<br />
&lt;a href=&quot;images/hiro.jpg&quot; rel=&quot;wbox[weeb]&quot; title=&quot;my cat hiro....ahhhhhhhhh&quot;&gt;<br />
&lt;img src=&quot;images/hiro_thumb.jpg&quot; width=&quot;75&quot; height=&quot;75&quot; /&gt;<br />
&lt;/a&gt;<br />
&lt;a href=&quot;images/moon.jpg&quot; rel=&quot;wbox[weeb]&quot; title=&quot;hahaha, mooned you !&quot;&gt;<br />
&lt;img src=&quot;images/moon_thumb.jpg&quot; width=&quot;75&quot; height=&quot;75&quot; /&gt;<br />
&lt;/a&gt;<br />
</span>
</p>

<h2>Slidey WeebBox</h2>
<p>
Use this to jump straight in to a slideshow, it's almost the same as above but for each first anchor use <span class="code">rel=&quot;slidey[yourgalleryname]&quot;</span>. For this example I've used empty anchors to include the other images.
</p>
<p>
<a href="images/trippy.jpg" rel="slidey[weeb2]"  title="much trippyness...is that a word!?"><img style="border:none;" src="images/slidey_thumb.gif" alt="Slidey!!!"  /></a>

<a href="images/train_station.jpg" rel="slidey[weeb2]" title="my attempt at an arty shot"></a>
<a href="images/hiro.jpg" rel="slidey[weeb2]"  title="my cat hiro....ahhhhhhhhh"></a>
<a href="images/moon.jpg" rel="slidey[weeb2]"  title="hahaha, mooned you!"></a>
</p>

<p>
Code:<br />
<span class="codeblock">&lt;a href=&quot;images/trippy.jpg&quot; rel=&quot;slidey[weeb]&quot; title=&quot;much trippyness...is that a word!?&quot;&gt;<br />
&lt;img src=&quot;images/trippy_thumb.jpg&quot; width=&quot;75&quot; height=&quot;75&quot; /&gt;<br />
&lt;/a&gt;<br />
&lt;a href=&quot;images/train_station.jpg&quot; rel=&quot;slidey[weeb]&quot; title=&quot;my attempt at an arty shot&quot;&gt;&lt;/a&gt;<br />

&lt;a href=&quot;images/hiro.jpg&quot; rel=&quot;slidey[weeb]&quot; title=&quot;my cat hiro....ahhhhhhhhh&quot;&gt;&lt;/a&gt;<br />
&lt;a href=&quot;images/moon.jpg&quot; rel=&quot;slidey[weeb]&quot; title=&quot;hahaha, mooned you !&quot;&gt;&lt;/a&gt;<br />
</span>
</p>



</body>
</html>
